<script setup lang="ts">
const props = defineProps<{
  tableData: any
}>()
</script>
<template>
  <div class="list-box">
    <ul>
      <li>
        <span class="itemDesc">{{ props?.tableData?.sponsorNameDesc }}</span>
        <span class="itemValue">{{ props?.tableData?.sponsorName }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props?.tableData?.sponsorIdDesc }}</span>
        <span class="itemValue">{{ props.tableData.sponsorId }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.countryDesc }}</span>
        <span class="itemValue">{{ props.tableData.country }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.levelDesc }}</span>
        <span class="itemValue">{{ props.tableData.level }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.frameLevelDesc }}</span>
        <span class="itemValue">{{ props.tableData.frameLevel }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.lj1Desc }}</span>
        <span class="itemValue">{{ props.tableData.lj1 }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.pwDesc }}</span>
        <span class="itemValue">{{ props.tableData.pw }}</span>
      </li>
      <li
        v-show="
          props.tableData.zwall !== undefined &&
          props.tableData.zwall !== '' &&
          props.tableData.zwall !== null
        "
      >
        <span class="itemDesc">{{ props.tableData.zwallDesc }}</span>
        <span class="itemValue">{{ props.tableData.zwall }}</span>
      </li>
      <li>
        <span class="itemDesc">{{ props.tableData.zwbvDesc }}</span>
        <span class="itemValue">{{ props.tableData.zwbv }}</span>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.list-box {
  width: 100%;
  height: calc(
    260px - 45px
  ); // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度

  ul {
    width: 100%;
    // height: calc(260px - 45px);  // 45px 是标题 35 高度+10px 轮播图指示器预留空间高度
    background-color: rgba(5, 24, 30, 0.5);
    overflow: auto;
    &::-webkit-scrollbar {
      width: 6px;
    }
    &::-webkit-scrollbar-track {
      background-color: rgba(5, 24, 30, 0.5);
    }
    &::-webkit-scrollbar-thumb {
      background-color: #00bfa9;
      border-radius: 5px;
    }
    li {
      width: 100%;
      height: calc((260px - 66px) / 9);
      font-size: 10px;
      text-align: center;
      line-height: calc((260px - 66px) / 9);
      background-color: rgba(10, 51, 68, 0.5);
      margin: 3px 0;
      span {
        display: inline-block;
      }

      .itemDesc {
        width: 35%;
      }
      .itemValue {
        width: 65%;
      }
    }
  }
}
</style>
